<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例——简陋的TODO记事本</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<style type="text/css">
			#app-notebook{
				width: 60%;
				margin: auto;
				background-color: #eee;
			}
			li {
				list-style:none;
				font-size: 16px;
				line-height: 30px;
			}
			.close{
				display:none; 
			}
			li:hover .close{
				display:block;
			}
		</style>
	</head>
	<body>
		<div id="app-notebook">
			<header>
				<h1>TODO清单</h1>
				<!--输入框-->
				<input type="text" class="form-control" placeholder="请输入计划事件" v-model="msg" @keyup.Enter="add"/>
				<input @click="add" type="button" value="我要将它列入我的计划清单！" class="btn btn-default"/>
				<input @click="resetmsg" type="reset" value="等等，这好像不是我的计划……" class="btn btn-default"/>
			</header>
			<!--TODO列表-->
			<section>
				<li v-for="(item,index) in todoList">
					<span>{{index+1}}. </span>
					<label>{{item}}</label>
					<button @click="remove(index)" type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				</li>
			</section>
			<!--统计个数 清空按钮-->
			<footer>
				<small><strong>{{ todoList.length }}</strong>
					items left</small>
				<button class="btn btn-default" @click="clear" v-show="todoList.length>0">Clear all Lists</button>
			</footer>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var notebookApp = new Vue({
				el:"#app-notebook",
				data:{
					msg:"",
					todoList:[
						"学习","健身","吃饭","洗澡","睡觉"
					]
				},
				methods:{
					add:function(){
						if(this.msg!=="") this.todoList.push(this.msg);
					},
					remove:function(index){
						this.todoList.splice(index,1);
					},
					resetmsg:function(){
						this.msg="";
					},
					clear:function(){
						this.todoList=[];
					}
				}
			})
		</script>
	</body>
</html>
